<template>
  <div class="edit-data-container">
      <nav-bar>
              <template #left>
        <van-icon name="arrow-left" @click="$router.back()"/>
      </template>
      <template #center>
          <span>编辑资料</span>
      </template>
      </nav-bar>
      <input type="file" hidden ref="file" @change="onFileChange" accept="image/png"/>
      <van-cell title="头像" is-link center @click="onChangePhoto">
          <template #default>
        <van-image
        round
        fit="cover"
        :src="userInfo.photo"
        />
          </template>

      </van-cell>
      <van-cell title="昵称" is-link :value='userInfo.name' @click="isShowEditName = true" />
      <van-cell title="性别" is-link :value="userInfo.gender === 1 ?'女':'男'" @click="isShowEditGender = true"/>
      <van-cell title="生日" is-link :value='userInfo.birthday' @click="isShowEditBirthday = true"/>
      <!-- 昵称弹出层 -->
      <van-popup v-model="isShowEditName" position="bottom" :style="{ height: '100%' }" round>
          <edit-name :is-show-edit-name.sync="isShowEditName" @update-name="handleUpdateName"></edit-name>
      </van-popup>
      <!-- 性别修改弹出层 -->
       <van-popup v-model="isShowEditGender" position="bottom" :style="{ height: '50%' }" round >
          <edit-gender :is-show-edit-gender.sync="isShowEditGender" :user-info = userInfo></edit-gender>
      </van-popup>
      <!-- 出生日期弹出层 -->
      <van-popup v-model="isShowEditBirthday" position="bottom" :style="{ height: '50%' }" round >
          <edit-birthday :is-show-edit-birthday.sync="isShowEditBirthday" :user-info = userInfo></edit-birthday>
      </van-popup>
      <!-- 头像弹出层 -->
        <van-popup v-model="isShowEditPhoto" position="bottom" :style="{ height: '100%' }" class="photo" v-if="isShowEditPhoto">
        <edit-photo :is-show-edit-photo.sync="isShowEditPhoto"  :img-src="imgsrc" :user-info="userInfo"></edit-photo>
      </van-popup>
  </div>

</template>

<script>
import NavBar from 'components/NavBar'
import EditName from './editdataChlid/EditName.vue'
import EditGender from './editdataChlid/EditGender.vue'
import EditBirthday from './editdataChlid/EditBirthday.vue'
import EditPhoto from './editdataChlid/EditPhoto.vue'
import { getUserInfo } from 'network/user'
export default {
  name: 'Editdata',
  components: { EditName, EditGender, EditBirthday, NavBar, EditPhoto },
  created () {
    this.$bus.$on('go-edit', id => {
      this.userId = id.toString()
      console.log(this.userId)
    })
  },
  beforeMount () {
    console.log('23')
    getUserInfo(this.userId).then(res => {
      this.userInfo = res.data.data
    }).catch(err => {
      console.log(err)
    })
  },
  data () {
    return {
      // 控制编辑姓名弹出层的显示
      isShowEditName: false,
      //  控制编辑性别弹出层的显示
      isShowEditGender: false,
      //  控制编辑生日弹出层的显示
      isShowEditBirthday: false,
      // 头像上传弹出层
      isShowEditPhoto: false,
      // 用户id
      userId: '',
      // 用户资料信息
      userInfo: {},
      imgsrc: ''
    }
  },
  methods: {
    handleUpdateName (message) {
      this.userInfo.name = message
    },
    onChangePhoto () {
      this.$refs.file.click()
    },
    onFileChange () {
      this.imgsrc = window.URL.createObjectURL(this.$refs.file.files[0])
      this.$refs.file.value = ''
      this.isShowEditPhoto = true
      console.log(typeof (this.imgsrc))
    }
  }
}
</script>

<style lang='less' scoped>
.edit-data-container{
    padding-top: 49px;
    .van-image{
        width: 30px;
        height: 30px;
    }
    .photo{
        background-color: black;
    }
}
</style>
